<script setup>
import {ref, onMounted} from 'vue'
import {clueInfo,addFollow,setClueEscalation,updateBusiness,operating_record} from '@/api/clue.js'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRoute()
// import route from '@/router'
//数据
const data = ref({
  //线索回显
  formClue:{
    createTime:null,
    updateTime:null,
    phone:'',
    clueSource:null,
    distributeUser:'',
    activity:''
  },
  //线索id
  clueId:route.params.clueId,
  //添加跟进
  // addFollowForm:{
  //   clientName:'',
  //   gender:null,
  //   age:null,
  //   wechatNumber:'',
  //   qqNumber:'',
  //   intentLevel:null,
  //   subject:null,
  //   remark:'',
  //   nextFllowTime:''
  // }
  addFollowForm:{
    clientName:'刘翔1',
    gender:null,
    age:null,
    wechatNumber:'',
    qqNumber:'',
    intentLevel:1,
    subject:1,
    remark:'我爱好学习',
    nextFllowTime:'2033-3-3'
  },
  //弹窗
  dialog:{
    Escalation:false
  },
  //伪线索上报
  clueEscalation:{
    rejectReason:null,
    rejectRemark:''
  }
})

//获取线索信息
const getClueInfo = async(id)=>{
  // console.log(route.value)
  const res = await clueInfo(id)
  data.value.formClue = res.data
  // console.log(res)
}

//添加跟随
const addFollowAPI = async()=>{
  const res = await addFollow({...data.value.addFollowForm,clueId:data.value.clueId})
  ElMessage.success(res.data)
}

//点击-伪线索上报
const openClueEscalation = ()=>{
  data.value.dialog.Escalation = true
}

//确定-线索上报
const isclueEscalationOK = async()=>{
  const res = await setClueEscalation({...data.value.clueEscalation,clueId:data.value.clueId})
  ElMessage.success(res.data)
  console.log(res)
}

//确定-转商机
const transformBusiness = async()=>{
  const res = await updateBusiness(data.value.clueId)
  ElMessage.success(res.data)
}

//操作记录列表
const dataList = ref({
  list:[]
})

//显示操作记录
const operating_recordAPI = async()=>{
  const res = await operating_record(data.value.clueId)
  dataList.value.list = res.data
  console.log(res.data)
  console.log(dataList.value.list)
}

//生命周期
onMounted(()=>{
  getClueInfo(route.params.clueId)
  operating_recordAPI()
})
</script>
<template>
  <div>
    <el-row>
      <el-col class="left" :span="16">
        <el-row>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>线索ID:{{ route.params.clueId }}</span>
              </div>
            </template>
            <div>
              <el-row>
                <el-col :span="8">创建时间：{{ data.formClue.createTime }}</el-col>
                <el-col :span="8">归属时间：{{ data.formClue.updateTime }}</el-col>
                <el-col :span="8">手机号：{{ data.formClue.phone }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span v-if="data.formClue.clueSource===0">渠道来源：线索活动</span>
                  <span v-else-if="data.formClue.clueSource===1">渠道来源：推荐介绍</span>
                  <span v-else>渠道来源：其他</span>
                </el-col>
                <el-col :span="8">线索分配：{{ data.formClue.distributeUser }}</el-col>
                <el-col :span="8">线索归属：{{ data.formClue.name }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="8">活动信息：{{ data.formClue.activity }}</el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <el-row justify="center">
          <el-col justify="center">
            <el-row justify="space-between">
            <h3>添加跟进</h3> <el-button @click="openClueEscalation">伪线索</el-button>
            <el-popconfirm title="你确定要转客户吗？" @confirm="transformBusiness">
              <template #reference>
                <el-button>转商机</el-button>
              </template>
            </el-popconfirm>
            </el-row>
            <el-row justify="center">
              <el-form :model="data.addFollowForm">
            <el-row>
              <el-form-item label="客户姓名" prop="clientName">
                <el-input v-model="data.addFollowForm.clientName" type="text" placeholder="请输入"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="性别" prop="gender">
                <!-- <el-radio>男</el-radio>
                <el-radio>女</el-radio> -->
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="年龄" prop="age">
                <el-input v-model="data.addFollowForm.age" placeholder="请输入"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="微信" prop="wechatNumber">
                <el-input v-model="data.addFollowForm.wechatNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="QQ" prop="qqNumber">
                <el-input v-model="data.addFollowForm.qqNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <!-- <el-form-item label="意向等级" prop="intentLevel">
                <el-radio>近期学习</el-radio>
                <el-radio>近期学习</el-radio>
                <el-radio>近期学习</el-radio>
                <el-radio>近期学习</el-radio>
              </el-form-item> -->
            </el-row>
            <el-row>
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="data.addFollowForm.subject" placeholder="请选择">
                  <el-option label="请选择">   </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <!-- <el-form-item label="跟进记录" prop="remark">
                <el-textarea v-model="data.addFollowForm.remark"></el-textarea>
              </el-form-item> -->
            </el-row>
            <el-row>
              <!-- <el-form-item label="下次跟进时间" prop="nextFollowTime">
              <span>时间表单</span>
              </el-form-item> -->
            </el-row>
          </el-form>
            </el-row>
          </el-col>
        </el-row>
        <el-row justify="right" >
          <el-col justify="right">
          <el-button @click="addFollowAPI">完成</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="right" :span="8">
        <el-row>
          <h3 class="ul-h3">操作记录</h3>
        </el-row>
        <el-row>
          <el-col :span="24">
            <ul id="ul-list">
            <li v-for="(item,index) in dataList.list" :key="index" class="ul-li">
              <p v-show="item.intentLevel" class="ul-p">
                <span class="color1">意向等级：</span>
                <span v-if="item.intentLevel === 0">近期学习</span>
                <span v-else-if="item.intentLevel === 1">打算学习</span>
                <span v-else-if="item.intentLevel === 2">考虑中</span>
                <span v-else-if="item.intentLevel === 3">进行了解</span>
                <span v-else-if="item.intentLevel === 4">打酱油</span>
              </p>
              <p v-show="item.subject" class="ul-p">
                <span class="color1">意向学科：</span>
                <span v-if="item.subject===0">Java</span>
                <span v-else-if="item.subject===1">前端</span>
                <span v-else-if="item.subject===2">Python</span>
                <span v-else-if="item.subject===3">人工智能</span>
                <span v-else-if="item.subject===4">大数据</span>
                <span v-else-if="item.subject===5">测试</span>
                <span v-else-if="item.subject===6">UI设计</span>
                <span v-else-if="item.subject===7">产品经理</span>
                <span v-else-if="item.subject===8">新媒体</span>
              </p>
              <p v-show="item.nextFollowTime" class="ul-p"><span class="color1">下次跟进时间：</span><span>{{ item.nextFollowTime }}</span></p>
              <p v-show="item.remark" class="color1">跟进记录：</p>
              <p  v-show="item.remark">{{ item.remark }}</p>

              <hr style="margin: 10px 0;"/>
              <el-row>
                <el-col class="ul-p">
                  <el-row class="color1">操作人：{{ item.createUser }}</el-row>
                  <el-row class="color1">{{ item.createTime }}</el-row>
                </el-col>
              </el-row>
            </li>
          </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog v-model="data.dialog.Escalation" title="伪线索上报">
      <el-form :model="data.clueEscalation">
        <el-form-item label="原因" prop="rejectReason">
          <el-select v-model.number="data.clueEscalation.rejectReason">
            <el-option label="空号" value="0"></el-option>
            <el-option label="已停机" value="1"></el-option>
            <el-option label="广告" value="2"></el-option>
            <el-option label="竞品" value="3"></el-option>
            <el-option label="无法联系" value="4"></el-option>
            <el-option label="其他" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="rejectRemark">
          <el-input v-model="data.clueEscalation.rejectRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="isclueEscalationOK">确定</el-button>
          <el-button>返回</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.left{
  // background-color: pink;
  .box-card {
  width: 100%;
}
}
.right{
  background-color: rgb(255,255,255);
  .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
#ul-list{
    padding: 10px;
    width:100%;
    color:rgb(139,139,139)
    &>li{

      background-color:rgb(230,230,230);
    }
}
.ul-h3{
  margin-left:20px;
  height:100px;
  line-height:100px
}
.ul-p{
  display:flex;
  margin-bottom:10px;
  span{
    flex:1;
  }
}
.ul-li{
  padding:5px;
  border-radius:10px;
  // background-color:rgb(230,230,230);
  background-color:rgb(255,251,230);
  list-style:none;
  margin-bottom:10px;
  .color1{
    color:rgb(147,147,147);
    
  }
}
</style>